<template>
	<view>
		<!-- 搜索品牌馆 -->
		
		<searces :slist='storelist' :flg='flage' :addr='addrsss' :flg1='flage1' :flg2='flage2' :flg3='flage3'></searces>
		
		<view v-if="dataList.length==0">
			<u-empty text="没有搜索结果" mode="search" ></u-empty>
		</view>
		<!-- 列表 -->
		<view class="box"  v-for="(item,index) in dataList" :key='index'>
			<view class="box_img">
				<image src="../../static/home/1.jpg" mode=""></image>
			</view>
			<view class="box_infor">
				<view style="height: 25rpx;margin-bottom: 18rpx;">
					<text class="text1">{{item.storeName}}</text>
					<text class="text2">{{item.storeComfortable==1?'舒适型':(item.storeComfortable==2?'精品型':'高端型')}}</text>
					<text class="icon iconfont" v-for="(item1,index1) in item.drillGrade" :key='index1'>&#xe65a;</text>
				</view>
				<view style="height: 21rpx;margin-bottom: 18rpx;">
					<text class="number">{{item.storeScore}}分</text>
					<text class="score">很棒</text>
					<text class="review">{{item.comments}}条点评</text>
					<text class="serve_count">{{item.serviceFrequency}}次服务</text>
				</view>
				<view style="height: 16rpx;margin-bottom: 20rpx;">
					<text class="distance">距我{{discountFilter(item.longitudeLatitude)}}km - 位于{{item.locationName}}</text>
				</view>
				<view style="display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;">		
							<view>
								<view style="">
									<text class="opened">开业时间:</text>
									<text class="year">{{item.openTime}}年</text>
								</view>
								<view style="transform: translateY(-16rpx);">
									<text class="opened">性质:</text>
									<text class="year">{{item.major}}</text>
								</view>
								<view class="publ_text">
									<text>免费茶点</text>
									<text>技术专业</text>
									<text>网红打卡</text>
								</view>
							</view>
							
							<view class="box_price">
								
								<view>
									<text class="meony_log">￥</text>
									<text class="price">{{item.average}}</text>
									<text class="jun">均</text>
								</view>
								<view>
									<text class="youhui">
										预约享受优惠
									</text>
								</view>
								<view class="onling">
									<text >
										在线预订
									</text>
								</view>
							</view>
					
				</view>
				
				
			</view>
		
		</view>
	</view>
</template>

<script>
	import searces from '../search_public/search.vue'
	import {storeFunction,searchByShopType,getPraise1,getSales1,getNewest1,minPrice,maxprice,searchShopByClassification,searchShopByAddress,screen1} from '@/api/index.js'
	import {checkedId} from '@/utils/xuehua.js'
	export default {
		data(){
			return{
				storelist:['工作室','专业店','综合店','连锁店','品牌店'],
				flage:true,
			
				flage1:false,
				flage2:true,
				flage3:true,
				Refresh:0,//控制上拉加载是谁
				addrsss:'',
				page:1,
				storefunction:'',
				dataList:[],
				first:[],
				Longitude:'',//当前经度
				Latitude:'',//当前维度
			}
		},
		components:{
			searces
		},
		methods:{
			//获取进入页面没有参数的内容
			getAll(){
				let that = this
				let data = {
					storeFunction:this.storefunction,
					page:this.page,
					city:this.addrsss
				}
				// this.dataList =[]
				storeFunction(data).then(res=>{
					
					let result = checkedId(res[1].data)
					let arr = []
					if(result.data.length>0){
					
						that.dataList=that.dataList.concat(result.data)
						// that.dataList=[...result.data]
						console.log('++++++++++++++++++++++++++++++++++',result.data)
					}else{
						uni.showToast({
							title:'没有更多数据了',
							icon:'none'
						})
					}
					// console.log(result,'branfd')
				})
			},
			//计算距离   //实在不知道怎么取名字了..就用xxx代表了 
			discountFilter(xxx){
				let that = this
				that.getLonLa()
				var radLat1 = that.Latitude * Math.PI / 180.0;
				var LadLat2 = xxx.split(',')[1]* Math.PI / 180.0;
				var La3 = radLat1 - LadLat2;
				var Lb3 = that.Longitude * Math.PI / 180.0 - xxx.split(',')[0] * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(radLat1) * Math.cos(LadLat2) * Math.pow(Math.sin(Lb3 / 2), 2)));
				s = s * 6378.137;//地球半径
				s = Math.round(s * 10000) / 10000;
				console.log("计算结果",s);
				return (s/1000).toFixed(2);
				
			},
			// 获取当前的经纬度
			getLonLa(){
				let that = this 
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						that.Longitude = res.longitude
						that.Latitude = res.latitude
						
						 
					}
				})
			},
			//搜索店铺类型内容
			getStoreType(){
				let that = this
				uni.$on('item',res=>{
					console.log(res)
					that.Refresh =1
					let data = res
					data.page = that.page
					data.city = that.addrsss
				
					searchByShopType(data).then(ress=>{
						console.log('雪花',ress);
						let result = checkedId(ress[1].data)
						console.log(result);
						if(result.data.length==0){
							uni.showToast({
								title:'没有更多数据了',
								icon:'none'
							})
							return
						}else{	
							
								that.dataList=that.dataList.concat(result.data)
						}
						})
							
						
					})
				
			},
			//点击搜索
			getsearch(){
				let that = this
				uni.$on('search1',res=>{
					console.log(res)
					let data = res
					data.page = that.page
					data.city = that.addrsss
					storeFunction(data).then(ress=>{
						let result = checkedId(ress[1].data)
							if(result.data.length==0){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
								return
							}else{
									that.dataList=that.dataList.concat(result.data)
							}
					})
				})
			},
			//好评优先
			getGood(){
				let that = this
				uni.$on('hpyx1',res=>{
					that.Refresh = 10
					let data = res
					data.page = that.page
					data.city = that.addrsss
					getPraise1(data).then(ress=>{
						let result = checkedId(ress[1].data)
							if(result.data.length==0){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
								return
							}else{
									that.dataList=that.dataList.concat(result.data)
							}
					})
				})
			},
			//销量最多
			getMore(){
				let that = this
				uni.$on('xlzd1',res=>{
					that.Refresh = 10
					let data = res
					data.page = that.page
					data.city = that.addrsss
					getSales1(data).then(ress=>{
						let result = checkedId(ress[1].data)
						if(result.data.length==0){
							uni.showToast({
								title:'没有更多数据了',
								icon:'none'
							})
							return
						}else{
								that.dataList=that.dataList.concat(result.data)
						}
					})
				})
			},
			//最新上架
			getNew(){
				let that = this
				uni.$on('zxsj1',res=>{
					that.Refresh = 10
					let data = res
					data.page = that.page
					data.city = that.addrsss
					getNewest1(data).then(ress=>{
						let result = checkedId(ress[1].data)
							if(result.data.length==0){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
								return
							}else{
									that.dataList=that.dataList.concat(result.data)
							}
					})
				})
			},
			//价格最低
			prcie_Min(){
				let that = this
				uni.$on('jgzd1',res=>{
					that.Refresh = 10
					let data = res
					data.page = that.page
					data.city = that.addrsss
					minPrice(data).then(ress=>{
						let result = checkedId(ress[1].data)
							if(result.data.length==0){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
								return
							}else{
									that.dataList=that.dataList.concat(result.data)
							}
					})
				})
			},
			//价格最高
			prcie_max(){
				let that = this
				uni.$on('jgzg1',res=>{
					that.Refresh = 10
					let data = res
					data.page = that.page
					data.city = that.addrsss
					maxprice(data).then(ress=>{
						let result = checkedId(ress[1].data)
							if(result.data.length==0){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
								return
							}else{
									that.dataList=that.dataList.concat(result.data)
							}
					})
				})
			},
			//智能排序
			
			orderby(){
				let that = this
				uni.$on('znpx1',res=>{
					that.Refresh = 10
					let data = res
					data.page = that.page
					data.city = that.addrsss
					storeFunction(data).then(ress=>{
						let result = checkedId(ress[1].data)
							if(result.data.length==0){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
								return
							}else{
									that.dataList=that.dataList.concat(result.data)
							}
					})
				})
			},
			//服务细分
			getServeInfor(){
				let that = this 
				uni.$on('mflist1',res=>{
				
					that.Refresh = 7
					let datas = res
					datas.page = that.page
					searchShopByClassification(datas).then(ress=>{
						let result = checkedId(ress[1].data)
							if(result.data.length==0){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
								return
							}else{
									that.dataList=that.dataList.concat(result.data)
							}
					})
				})
			},
			//位置区域查询店铺
			getStoreInfor(){
				let that = this
				uni.$on('wzyb1',res=>{
				
					that.Refresh = 8
					let datas = res
					datas.page = that.page
					datas.city = that.addrsss
					searchShopByAddress(datas).then(ress=>{
						let result = checkedId(ress[1].data)
							if(result.data.length==0){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
								return
							}else{
									that.dataList=that.dataList.concat(result.data)
							}
					})
				})

			},
			//获取多个筛选
			getFilters(){
				let that = this
				that.dataList = []
				uni.$on('wan1',res=>{
						// that.dataList=[]
					that.Refresh = 9
					let datas = res
					datas.page = that.page
					datas.city = that.addrsss
					screen1(datas).then(ress=>{
					
						let arr=[]
						let result = checkedId(ress[1].data)
							if(result.data.length==0){
								uni.showToast({
									title:'没有更多数据了',
									icon:'none'
								})
								return
							}else{
									that.dataList=that.dataList.concat(result.data)
							}
							
							// that.dataList = result.data
					})
				})
			}
			
		},
		async onLoad(option) {
			console.log(option)
			let that = this
			function aa(){
				that.addrsss = option.city
			}
			await aa()
			//调用即进入页面得到的内容
			this.getAll()
				uni.$on('clears',res=>{
					this.page = 1
					this.dataList=[]
				})
			//调用店铺类型的结果
			this.getStoreType()
			//调用收索
			this.getsearch()
			//调用销量最多
			this.getMore()
			//调用最新上架
			this.getNew()
			//调用价格最低
			this.prcie_Min()
			//调用价格最高
			this.prcie_max()
			//智能排序
			this.orderby()
			//调用好评优先
			this.getGood()
			//调用服务细分
			this.getServeInfor()
			//调用位置区域
			this.getStoreInfor()
			//调用多个筛选
			this.getFilters()
			// uni.$on('znp',res=>{
			// 	console.log('zxsj')
			// })
			//初始化页码
			uni.$on('page',res=>{
				this.page = res.page
				this.dataList=[]
			})
			// uni.$on('wan1',res=>{
			// 	this.dataList=[]
			
			// })
		},
		onUnload() {
			uni.$off('zxsj1')
			uni.$off('item')
			uni.$off('search1')
			uni.$off('hpyx1')
			uni.$off('xlzd1')
			uni.$off('zxsj1')
			uni.$off('jgzd1')
			uni.$off('jgzg1')
			uni.$off('znpx1')
			uni.$off('mflist1')
			uni.$off('wzyb1')
			uni.$off('wan1')
			uni.$off('page')
			uni.$off('clears')
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.Refresh =0
			
			this.dataList = []
			this.getAll()
		},
		// 上拉加载
		onReachBottom(){
		
			
			// //加载筛选更多的结果
			if(this.Refresh ==9){
					//调用多个筛选
					this.page++
					uni.$emit('send_filters',{msg:'124555'})
					// this.getFilters()
					console.log('xxx')
			}
			//加载筛选更多的结果
			if(this.Refresh ==0){
					//调用第一次进来
					
					this.page++
					this.getAll()
					// this.getFilters()
					console.log('xxx')
			}
			//加载更多地址
			if(this.Refresh==8){
				this.page++
				uni.$emit('send_address',{msg:'124555'})
			}
			//加载门店类型的跟多
			if(this.Refresh==1){
				this.page++
				uni.$emit('send_type',{msg:'124555'})
			}
			//加载更多推荐排序
			if(this.Refresh==10){
				this.page++
				console.log('kkkk')
				uni.$emit('send_zn',{msg:'124555'})
			}
			//加载更多服务细分
			if(this.Refresh==7){
				this.page++
				uni.$emit('send_serve',{msg:'124555'})
			}
			
		
		}
	}
</script>

<style scoped lang="less">
	
	//盒子列表样式
	.box{
		padding: 15rpx 25rpx;
			border-bottom: 1rpx solid #E0E0E0;
		display: flex;
		.box_img{
			width: 180rpx;
			height: 218rpx;
			padding-top: 15rpx;
			image{
				width: 180rpx;
				height: 218rpx;
			}
		}
		.box_infor{
			flex: 3;
			margin-left: 22rpx;
			
			
			// justify-content: space-between;
			.text1{				
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;
				margin-right: 22rpx;
			}
			.text2{				
				font-size: 22rpx;
				font-family: PingFang;
				// font-weight: 500;
				color: #333333;
				margin-right: 22rpx;
			}
			.iconfont{
				color: #F2CB51;
				font-size: 14rpx;
				margin-left: 10rpx;
			}
			.score{				
				font-size: 22rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #000000;
				
			}
			.number{	
				border-bottom: 4rpx solid #FFBE39;
				font-size: 22rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #000000;
				margin-right: 10rpx;
			}
			.review{				
				font-size: 16rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #373737;
				margin-right: 28rpx;
				margin-left: 10rpx;
			}
			.serve_count{				
				font-size: 16rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #363636;
			}
			.distance{				
				font-size: 16rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #363636;
			}
			.opened{				
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #565555;
			}
			.year{				
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #212121;
			}
			.publ_text{
				line-height: 17rpx;
				// transform: translateY(-15rpx);
				text{
					display: inline-block;
					border: 1rpx solid #00C6C2;
					border-radius: 4rpx;
					width: 80rpx;
					height: 30rpx;
					text-align: center;
					line-height: 30rpx;
					font-size: 16rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #00C6C2;
					margin-right: 23rpx;
				}
			}
		}
		.box_price{
			line-height: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			.meony_log{
				
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.price{
				
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.jun{
				
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.youhui{				
				font-size: 16rpx;
				height: 16rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #00C6C2;
				margin-bottom: -10rpx;
			}
			.onling{
				display: inline-block;
				width: 80rpx;
				height: 33rpx;
				background: #00C6C2;
				border-radius: 4rpx;
				text-align: center;
				line-height: 16rpx;
				margin-top: 10rpx;
				text{
					opacity: 0.8;
					font-size: 16rpx;
					font-family: STHeitiSC;
					font-weight: 300;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
